<template>
  <div class="show">
     <button @click="isShow = !isShow">显示/隐藏3</button>
     <!-- 定义name属性即让动画执行时也要用到这个name值  appear值为true则渲染dom时就加入动画效果-->
     <transition-group name="see" appear>
        <h1 v-show="isShow" key="1">welcome!!</h1>
        <h1 v-show="!isShow" key="2">su liang</h1>
     </transition-group>
  </div>
</template>

<script>
export default {
    name:"Test",
    data(){
        return {
            isShow:'true'
        }
    }
}
</script>

<style>
    .show h1{
        background-color: lightgreen;
    }
    /* 来的起点、去的终点 */
    .see-enter,.see-leave-to{
        transform: translateX(-100%);
    }
    /* 在动画执行的过程加过渡 */
    .see-enter-active,.see-leave-active{
        transition: 1s linear;
    }
    /* 来的终点、去的起点 */
    .see-enter-to,.see-leave{
        transform: translate(0);
    }
  
</style>